<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
    <ui:composition template="structpage/templates/defaultLayout.xhtml">
        <ui:define name="title">
            <h:outputText value="ChequeTeatinos" />
        </ui:define> 
        <ui:define name="scriptmenubar">
            <script>
                $(document).ready(function() {
                    selectandtitle("#licontacto", "ChequeTeatinos - Contacto"); 
                });
            </script> 
        </ui:define>    
        <ui:define name="content">
            <h2><h:outputText value="#{msg.contact}"/></h2>
            <h:panelGroup layout="block">
                <h:form>
                    <h:panelGroup layout ="block" styleClass="form_settings">
                        <p>
                            <h:panelGroup><h:outputText value="#{msg.name}"/></h:panelGroup><br/>
                            <h:inputText id="nombreContacto" label="Nombre" styleClass="contact" required ="true">
                                <f:ajax event="blur" render="NombreContactoValidation" />  
                            </h:inputText>
                        </p>
                        
                        <p>
                            <h:panelGroup><h:outputText value="#{msg.email}"/></h:panelGroup><br/>
                            <h:inputText id="emailContacto" label="E-mail" styleClass="contact" required ="true">
                                <f:ajax event="blur" render="EmailValidationMessage" />  
                            </h:inputText>
                        </p>
                        <p>
                            <h:panelGroup><h:outputText value="#{msg.message}"/></h:panelGroup><br/>
                            <h:inputTextarea id="textoContacto" label="Mensaje" styleClass="contact" required ="true">
                                <f:ajax event="blur" render="MensajeValidation" />  
                            </h:inputTextarea><br/>
                        </p>
                        <p style="padding-top: 15px">
                            <h:commandButton styleClass="submit" value="#{msg.send}" />
                        </p>
                    </h:panelGroup>
                    <p>
                        <span><h:message for="nombreContacto" styleClass="error" id="NombreContactoValidation"/></span>
                    </p>
                    <p>
                        <span><h:message for="emailContacto" styleClass="error" id="EmailValidationMessage"/></span>
                    </p>
                    <p>
                        <span><h:message for="textoContacto" styleClass="error" id="MensajeValidation"/></span>
                    </p>
                </h:form>                
            </h:panelGroup>
        </ui:define>
    </ui:composition>
</html>

